<script setup>
import { useRouter, useRoute } from 'vue-router'
import LoginComponent from '../components/Login.vue'
import { useAuth } from '../composables/useAuth'

const router = useRouter()
const route = useRoute()
const { login } = useAuth()

const handleLoginSuccess = (authData) => {
  if (authData && authData.token && authData.user) {
    login(authData.token, authData.user); // 更新认证状态
    // 登录成功后，检查是否有重定向目标，否则跳转到聊天页
    const redirectPath = route.query.redirect || '/chat';
    router.push(redirectPath);
  } else {
    console.error("Login success event missing data:", authData);
    // 可以显示错误提示
  }
}

const switchToRegister = () => {
  router.push({ name: 'Register' });
}
</script>

<template>
  <div class="auth-page-container simple-login">
    <!-- 返回首页按钮 -->
    <button class="back-home-btn" @click="router.push('/')">
      <span class="el-icon">🏠</span> 返回首页
    </button>

    <!-- 登录表单容器 -->
    <div class="auth-content-panel simple-panel">
      <LoginComponent
        @login-success="handleLoginSuccess"
        @switch-to-register="switchToRegister"
      />
    </div>
  </div>
</template>

<style scoped>
/* 更新容器样式 */
.auth-page-container.simple-login {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(120deg, #f0f4f8 0%, #e2eafc 100%); /* 简约渐变 */
  padding: 2rem;
  box-sizing: border-box;
  position: relative; /* 为了标题定位 */
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  overflow: hidden; /* 防止内容溢出 */
}

/* 删除左上角标题样式 */
/* .page-title { ... } */

/* 重新添加返回首页按钮样式 */
.back-home-btn {
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #333;
  padding: 0.6rem 1.2rem;
  border-radius: 980px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10; /* 确保在内容之上 */
}
.back-home-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.back-home-btn .el-icon {
  font-size: 1.1em;
}

/* 简化内容面板样式 */
.auth-content-panel.simple-panel {
  width: 100%;
  max-width: 400px; /* 调整宽度 */
  background-color: #ffffff;
  padding: 2.5rem; /* 调整内边距 */
  border-radius: 12px; /* 减小圆角 */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* 调整阴影 */
  margin-top: 2rem; /* 可以稍微调整上边距，因为标题移除了 */
}

/* 调整 :deep 样式以匹配简约风格 */
:deep(.auth-content-panel.simple-panel h2) { /* 登录组件内部标题 */
  text-align: center;
  color: #1a1a1a;
  font-size: 1.6rem; /* 调整大小 */
  font-weight: 600;
  margin-bottom: 2rem; /* 调整间距 */
}

:deep(.auth-content-panel.simple-panel .el-form-item__label) {
  color: #555;
  font-weight: 500;
  margin-bottom: 0.3rem;
}
:deep(.auth-content-panel.simple-panel .el-input__wrapper) {
  border-radius: 8px; /* 减小圆角 */
  box-shadow: none !important;
  background-color: #f7f8fa; /* 更浅的背景 */
  border: 1px solid #e8e8e8; /* 更浅的边框 */
  padding: 0.2rem 0.8rem; /* 调整内边距 */
  height: 44px; /* 调整高度 */
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
:deep(.auth-content-panel.simple-panel .el-input__wrapper.is-focus) {
  border-color: #007aff;
  background-color: #fff;
}
:deep(.auth-content-panel.simple-panel .el-button--primary) {
  width: 100%;
  height: 46px; /* 调整高度 */
  border-radius: 8px; /* 匹配输入框圆角 */
  background-color: #007aff;
  border-color: #007aff;
  font-size: 1rem; /* 调整字体 */
  font-weight: 500;
  margin-top: 1.5rem; /* 调整间距 */
  transition: background-color 0.3s ease, transform 0.2s ease;
}
:deep(.auth-content-panel.simple-panel .el-button--primary:hover) {
  background-color: #0056b3;
  border-color: #0056b3;
  transform: none; /* 移除放大效果 */
}
:deep(.auth-content-panel.simple-panel .switch-auth-mode) {
  text-align: center;
  margin-top: 1.5rem; /* 调整间距 */
  font-size: 0.9rem; /* 调整字体 */
  color: #666;
}
:deep(.auth-content-panel.simple-panel .switch-auth-mode span) {
  color: #007aff;
  cursor: pointer;
  font-weight: 500;
}
</style>